<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" @close="handleClickCancel">
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
      <el-form-item :label="$t('common.part.serviceProviderNo')">
        <el-input v-if="form.system" :value="getWarrantyServiceItemLabel(form.serialNumber)" maxlength="100" :placeholder="$t('product.productQualityServiceItems.pleaseEnterServiceItemNumber')" disabled></el-input>
        <el-input v-else v-model="form.serialNumber" maxlength="100" :placeholder="$t('product.productQualityServiceItems.pleaseEnterServiceItemNumber')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('common.product.serviceItemName')" prop="projectName">
        <el-input v-if="form.system" :value="getWarrantyServiceItemLabel(form.projectName)" :placeholder="$t('product.productQualityServiceItems.pleaseEnterServiceItemName')" disabled></el-input>
        <el-input v-else v-model="form.projectName" :placeholder="$t('product.productQualityServiceItems.pleaseEnterServiceItemName')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('common.product.serviceProjectCycle')" prop="serviceProject">
        <el-row type="flex" justify="space-between" :gutter="10">
          <el-col :span="16">
            <el-input type="number" v-model="form.timeLimit"></el-input>
          </el-col>
          <el-col :span="8">
            <el-select v-model="form.timeUnit">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('common.product.serviceItemsDes')">
        <el-input type="textarea" v-model="form.remark" maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClickCancel">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="handleClickSure(ruleFormRef)">{{ $t('common.base.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed } from 'vue';
import i18n from '@src/locales';
import { periodOption } from '@src/modules/productV2/productWarrantyServiceItem/productWarrantyItemListPage/fields.js';
import { WarrantyServiceItemLabelEnum } from '@model/enum/LabelEnum'

/* util */
import MathUtil from '@src/util/math';

export default defineComponent({
  name: '',
  props: {
    dialogType: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '',
    },
  },
  emits: ['addProductQualityService'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);
    const ruleFormRef = ref();

    const checkServiceProject = (rule, value, callback) => {
      // 小数位数
      const count = MathUtil.decimalNumber(state.form.timeLimit);

      if (!(state.form.timeLimit && state.form.timeUnit)) {
        callback(new Error(i18n.t('product.productQualityServiceItems.pleaseEnterServiceProjectCycle')));
      }

      if (Number(state.form.timeLimit) <= 0) callback(new Error(i18n.t('task.tip.greaterThanZeroTip1')));

      if (count > 0) callback(new Error(i18n.t('task.tip.greaterThanZeroTip1')));

      callback();
    };

    const state = reactive({
      form: {
        serialNumber: '',
        projectName: '',
        timeLimit: '1',
        timeUnit: 'year',
        remark: '',
        system: false,
      },
      rules: {
        projectName: [
          { required: true, message: i18n.t('product.productQualityServiceItems.pleaseEnterServiceItemName'), trigger: 'blur' },
          { max: 100, message: i18n.t('product.productQualityServiceItems.serviceItemNameLimit'), trigger: 'blur' },
        ],
        serviceProject: [{ required: true, validator: checkServiceProject, trigger: ['blur', 'change'] }],
      },
      options: periodOption
    });

    const dialogTitle = computed(() => {
      return props.title;
    });

    // 点击确定
    const handleClickSure = async formEl => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          emit('addProductQualityService', state.form, props.dialogType);
        } else {
          console.log('error submit!', fields);
        }
      });
    };

    const handleReset = () => {
      state.form = {
        serialNumber: '',
        projectName: '',
        timeLimit: '1',
        timeUnit: 'year',
        remark: '',
        system: false,
      };
    };

    // 点击取消 or 关闭
    const handleClickCancel = () => {
      if (!ruleFormRef.value) return;

      dialogVisible.value = false;
      ruleFormRef.value.resetFields();
      handleReset();
    };

    // 获取质保服务项目的多语言label
    const getWarrantyServiceItemLabel = (label) => {
      return WarrantyServiceItemLabelEnum[label] || label
    }

    return {
      dialogVisible,
      ruleFormRef,
      ...toRefs(state),
      dialogTitle,
      handleClickSure,
      handleClickCancel,
      getWarrantyServiceItemLabel,
    };
  },
});
</script>
